<template>
  <div v-loading="loading">
    <MciTable ref="multipleTableRef" :data="tableData" stripe @selection-change="handleSelectionChange">
      <MciTableColumn type="index" label="序号" align="center" :index="indexMethod" width="50" />
      <MciTableColumn type="selection" width="55" />
      <MciTableColumn label="配置名称" prop="cfgName" />
      <MciTableColumn label="数据源表名" prop="tableName" />
      <!-- <MciTableColumn label="id列名" prop="idColumn" />
      <MciTableColumn label="id列名类型" prop="idColumnType" />
      <MciTableColumn label="查询字段" prop="columns" />
      <MciTableColumn label="执行条件" prop="conditions" />
      <MciTableColumn label="数据源表名" prop="variables" />
      <MciTableColumn label="变量列表" prop="tableName" /> -->
      <MciTableColumn label="操作" min-width="160">
        <template #default="scope">
          <el-space>
            <mci-button type="primary" link @click="editRow(scope.row)"> 修改 </mci-button>

            <el-popconfirm title="确定删除吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="delRow(scope.row)">
              <template #reference>
                <mci-button type="danger" link> 删除 </mci-button>
              </template>
            </el-popconfirm>
          </el-space>
        </template>
      </MciTableColumn>
    </MciTable>
    <MciPagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 20, 30, 50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { MciTable, MciTableColumn, MciButton, MciPagination } from '@/components/base';
import { ElSpace, ElPopconfirm } from 'element-plus';
import { postDataCfgPage, postDataCfgDelete } from '@/api/decision-engine';
import type {
  IPostDataCfgPageReq,
  IPostDataCfgPageRes,
  IPostDataCfgDeleteReq,
  IPostDataCfgDeleteRes
} from '@/api/decision-engine';

const emit = defineEmits(['edit', 'selection']);
// 表格
const loading = ref(false);
const tableData = ref<any[]>([]);
// ref
const multipleTableRef = ref<any>(null);
const multipleSelection = ref<any[]>([]);
// 翻页
const currentPage = ref(1);
const pageSize = ref(15);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const pageTotal = ref(0);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  tableRequest();
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  tableRequest();
};
// 序号列index
const indexMethod = (index: number) => {
  return pageSize.value*(currentPage.value - 1) + index + 1;
};
// 模型数据
const tableRequest = async () => {
  loading.value = true;
  const params: IPostDataCfgPageReq = {
    pageNo: currentPage.value,
    pageSize: pageSize.value
  };
  try {
    const data: IPostDataCfgPageRes = await postDataCfgPage(params);

    if (data && data.currentPage === currentPage.value) {
      tableData.value = data.list || [];
      pageTotal.value = data.total || 0;
    }
  } finally {
    setTimeout(() => {
      loading.value = false;
    }, 300);
  }
};

tableRequest();

// 删除行
const delRow = async (row: any) => {
  if (!row || !row.id) return;
  const params: IPostDataCfgDeleteReq = {
    id: row.id
  };
  const data: IPostDataCfgDeleteRes = await postDataCfgDelete(params);
  // data && tableRequest();
  tableRequest();
};

// 修改行
const editRow = (row: any) => {
  if (!row || !row.id) return;
  emit('edit', row);
};

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
  emit('selection', val);
};

const clearSelection = () => {
  multipleTableRef.value?.clearSelection();
};

defineExpose({
  tableRequest,
  clearSelection
});
</script>
